<template>
    <div class="flex align-end border rounded-[5px] pa-1 box-light-shadow">
        <div class="flex-grow">
            <!-- 可以提及的輸入框 @某人 -->
            <mrc_ess_MentionInput ref="mrcEssMentionInputRef" v-model="html" height="56" :placeholder="$t(props.placeholder)"></mrc_ess_MentionInput>
        </div>
        <v-btn class="w-[24px] !h-[24px] !min-w-[24px] !min-h-[24px] pl-0 pr-0" color="primary" @click="handleClick">
            <svg-icon iconClass="send" size="16" ></svg-icon>
        </v-btn>
    </div>
</template>

<script lang="ts" setup>
import { ref, toRaw } from 'vue';
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

const emit = defineEmits(["send"]);

const props = defineProps({
    placeholder: {
        type: String,
        default: "tip_please_leave_a_comment"
    }
})

const html = ref("");

const mrcEssMentionInputRef = ref<any>(null);

function handleClick() {
    if (mrcEssMentionInputRef.value.editor.isEmpty()) {
        proxy.$errorMsg(proxy.$t('tip_please_leave_a_comment'));
        return;
    }
    emit("send", toRaw(html.value));
    html.value = "";
}

</script>

<style scoped></style>